<template>
  <view class="research">
    <Sign>对于该县（市、区）：</Sign>

    <view class="form">
      <view class="form-item" v-for="item in formMap" :key="item.key">
        {{ item.text }}
        <view class="input-container">
          <u-input border="bottom" type="digit" inputAlign="center" color="#3c9cff" v-model="form[item.key]"></u-input>
        </view>
      </view>

      <view class="form-date" @click="openPicker">
        <u-datetime-picker
          ref="datetimePicker"
          :show="showPicker"
          mode="date"
          closeOnClickOverlay
          @close="hidePicker"
          @cancel="hidePicker"
          @confirm="selectDate"
        ></u-datetime-picker>
        <view class="form-date-title">调研日期：</view>
        <u-input
          v-model="form.researchDate"
          disabled
          disabledColor="#fff"
          placeholder="请选择时间"
          border="none"
          fontSize="18"
          inputAlign="center"
        ></u-input>
        <!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
      </view>
    </view>

    <view class="next">
      <u-button type="primary" @click="submitForm">开始问卷</u-button>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
export default {
  components: {},
  data: () => ({
    showPicker: false,
    form: {
      city_disposable_income: "",
      village_disposable_income: "",
      wage_income: "",
      operational_income: "",
      property_income: "",
      transfer_income: "",
      minimum_living_level: "",
      researchDate: "",
    },

    formMap: [
      { text: "城镇人均可支配收入：", key: "city_disposable_income" },
      { text: "农村人均可支配收入：", key: "village_disposable_income" },
      { text: "工资性收入：", key: "wage_income" },
      { text: "经营性收入：", key: "operational_income" },
      { text: "财产性收入：", key: "property_income" },
      { text: "转移性收入：", key: "transfer_income" },
      { text: "最低生活保障标准：", key: "minimum_living_level" },
    ],
  }),
  computed: {
    ...mapState(["researchInfo"]),
  },
  methods: {
    ...mapMutations(["setResearchInfo"]),
    openPicker() {
      this.showPicker = true
    },
    hidePicker() {
      this.showPicker = false
    },
    selectDate(detail) {
      this.form.researchDate = uni.$u.timeFormat(detail.value, "yyyy-mm-dd")
      this.showPicker = false
    },

    // 表单校验，提交
    submitForm() {
      let flag = false
      Object.keys(this.form).forEach((key) => {
        if (!this.form[key].trim()) {
          flag = true
          if (!this.form.researchDate) return uni.$u.toast("请填写日期")
          return uni.$u.toast("所填项不能为空")
        }
      })
      if (flag) return
      this.setResearchInfo(this.form)
      uni.navigateTo({ url: "/pages/surveyPage/surveyPage" })
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    for (const key in this.researchInfo) {
      this.form[key] = this.researchInfo[key]
    }
  },
}
</script>

<style lang="scss" scoped>
.research {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 40rpx;

  .form-item {
    display: flex;
    align-items: center;
    color: $uni-color-paragraph;
    font-weight: bold;
  }
  .form-date {
    width: 100%;
    margin-top: 100rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &-title {
      color: $uni-color-primary;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .next {
    padding: 0 10%;
    margin-top: auto;
    margin-bottom: 100rpx;
  }

  .input-container {
    width: 160rpx;
    margin: 0 20rpx;
  }
}
</style>
